import React, { Component } from 'react';
import List from './components/List';
import { connect } from 'react-redux';
import Topic from './components/Topic';
import Recommend from './components/Recommend';
import Writter from './components/Writter';
import { actionCreaters } from './store';
import { Carousel } from 'antd';
import { HomeWrapper, HomeLeft, HomeRight, HomeImg, BackToTop
} from "./style";

class Home extends Component {
  render() {
    const { showScroll } = this.props
    const backToTop = () => {
      window.scrollTo(0,0)
    }
    return (
        <HomeWrapper>
          {
            showScroll ?
              <BackToTop onClick={()=>backToTop()}>回到顶部</BackToTop> :
              null
          }
          <HomeLeft>
            <Carousel autoplay effect="fade">
              <HomeImg src="//upload.jianshu.io/admin_banners/web_images/4524/65fb6e8f81ccbbc7dacf5c380e0366a003ba7881.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
              <HomeImg src="//upload.jianshu.io/admin_banners/web_images/4529/d8d780d8dd4a32485655815c2cb4e367b61cb15c.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
              <HomeImg src="//upload.jianshu.io/admin_banners/web_images/4539/814816838070065013af51fac80e6a03e453a660.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
            </Carousel>

            <Topic></Topic>
            <List></List>
          </HomeLeft>
          <HomeRight>
            <Recommend></Recommend>
            <Writter></Writter>
          </HomeRight>
        </HomeWrapper>
    )
  }

  componentDidMount () {
    this.props.changeHomeData();
    window.addEventListener('scroll', this.props.changeScroll)
  }
  componentWillUnmount () {
    window.removeEventListener('scroll', this.props.changeScroll)
  }
}

const mapDispatch = (dispatch) => {
  return {
    changeHomeData() {
      actionCreaters.changHomeData(dispatch)
    },
    changeScroll() {
      document.documentElement.scrollTop > 200 ?
      dispatch(actionCreaters.changeScroll(true)) : dispatch(actionCreaters.changeScroll(false))
    }
  }
}
const mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})
export default connect(mapState,mapDispatch)(Home);
